<template>
  <div class="p-3">
    <a-card style="height: 820px" :bordered="false">
      <a-form layout="inline">
        <a-form-item label="操作时间">
          <a-date-picker />
        </a-form-item>
        <a-form-item label="归属机构">
          <a-select style="width: 150px" placeholder="请选择归属机构"/>
        </a-form-item>
        <a-form-item label="修改人">
          <a-select style="width: 150px" placeholder="请选择修改人"/>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="showModal">新增</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        class="mt-3"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.dataIndex == 'action'">
            <a-button type="link">编辑</a-button>
            <a-button type="link">删除</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增催费通知文案弹窗 -->
    <a-modal
      v-model:visible="modalVisible"
      title="新增催费通知文案"
      width="800px"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :model="formData" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="归属机构">
              <a-select v-model="formData.organization" placeholder="请选择归属机构">
                <a-select-option value="机构1">机构1</a-select-option>
                <a-select-option value="机构2">机构2</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="催费单标题">
              <a-input v-model="formData.title" placeholder="请输入催费单标题" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-form-item label="明细表标题">
          <a-input v-model="formData.detailTitle" placeholder="请输入明细表标题" />
        </a-form-item>
        
        <a-form-item label="展示缴费二维码">
          <a-radio-group v-model="formData.showQrCode">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item label="正文">
          <div class="content-editor">
            <div class="editor-toolbar">
              <span>第一行</span>
              <div class="toolbar-buttons">
                <a-button size="small" type="text">Normal</a-button>
                <a-button size="small" type="text">B</a-button>
                <a-button size="small" type="text">I</a-button>
                <a-button size="small" type="text">U</a-button>
                <a-button size="small" type="text">S</a-button>
                <a-button size="small" type="text">A</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">🔗</a-button>
                <a-button size="small" type="text">📷</a-button>
                <a-button size="small" type="text">📊</a-button>
                <a-button size="small" type="text">🎬</a-button>
                <a-button size="small" type="text">📎</a-button>
              </div>
            </div>
            <a-textarea 
              v-model="formData.content1" 
              placeholder="请输入正文第一行内容" 
              :rows="3"
              class="editor-textarea"
            />
          </div>
        </a-form-item>
        
        <a-form-item>
          <div class="content-editor">
            <div class="editor-toolbar">
              <span>第二行</span>
              <div class="toolbar-buttons">
                <a-button size="small" type="text">Normal</a-button>
                <a-button size="small" type="text">B</a-button>
                <a-button size="small" type="text">I</a-button>
                <a-button size="small" type="text">U</a-button>
                <a-button size="small" type="text">S</a-button>
                <a-button size="small" type="text">A</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">🔗</a-button>
                <a-button size="small" type="text">📷</a-button>
                <a-button size="small" type="text">📊</a-button>
                <a-button size="small" type="text">🎬</a-button>
                <a-button size="small" type="text">📎</a-button>
              </div>
            </div>
            <a-textarea 
              v-model="formData.content2" 
              placeholder="请输入正文第二行内容" 
              :rows="3"
              class="editor-textarea"
            />
          </div>
        </a-form-item>
        
        <a-form-item>
          <div class="content-editor">
            <div class="editor-toolbar">
              <span>第三行</span>
              <div class="toolbar-buttons">
                <a-button size="small" type="text">Normal</a-button>
                <a-button size="small" type="text">B</a-button>
                <a-button size="small" type="text">I</a-button>
                <a-button size="small" type="text">U</a-button>
                <a-button size="small" type="text">S</a-button>
                <a-button size="small" type="text">A</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">≡</a-button>
                <a-button size="small" type="text">🔗</a-button>
                <a-button size="small" type="text">📷</a-button>
                <a-button size="small" type="text">📊</a-button>
                <a-button size="small" type="text">🎬</a-button>
                <a-button size="small" type="text">📎</a-button>
              </div>
            </div>
            <a-textarea 
              v-model="formData.content3" 
              placeholder="请输入正文第三行内容" 
              :rows="3"
              class="editor-textarea"
            />
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';

// 弹窗状态
const modalVisible = ref(false);

// 表单数据
const formData = reactive({
  organization: '',
  title: '',
  detailTitle: '',
  showQrCode: true,
  content1: '',
  content2: '',
  content3: ''
});

// 表格数据
const dataSource = ref([]);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
});

// 显示弹窗
const showModal = () => {
  modalVisible.value = true;
};

// 确认提交
const handleOk = () => {
  console.log('提交表单数据:', formData);
  modalVisible.value = false;
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};
const columns = [
  {
    title: '归属机构',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '催费单标题',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '明细表标题',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '正文第一行',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '正文第二行',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '正文第三行',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '展示缴费二维码',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '修改人',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '修改时间',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
  },
];
</script>
<style scoped>
.content-editor {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #fafafa;
  border-bottom: 1px solid #d9d9d9;
  font-size: 12px;
}

.toolbar-buttons {
  display: flex;
  gap: 4px;
}

.toolbar-buttons .ant-btn {
  padding: 0 4px;
  height: 24px;
  font-size: 12px;
  border: none;
  box-shadow: none;
}

.editor-textarea {
  border: none;
  border-radius: 0;
  resize: none;
}

.editor-textarea:focus {
  box-shadow: none;
}
</style>
